import React, { useState, useEffect } from "react";
import { Table, Button, Tag, Modal, message } from "antd";
import Others from "../../api/other/index";
const { confirm } = Modal;
const Github = props => {
  const tableLabel = [
    {
      title: "项目",
      dataIndex: "name",
      align: "center"
    },
    {
      title: "账户",
      dataIndex: "author",
      align: "center"
    },
    {
      title: "地址",
      dataIndex: "url",
      align: "center"
    },
    {
      title: "star",
      dataIndex: "star",
      align: "center"
    },
    {
      title: "语言",
      dataIndex: "language",
      align: "center",
      render: item => {
        switch (item) {
          case "0":
            return "javascript";
          case "1":
            return "html";
          case "2":
            return "css3";
          case "3":
            return "typescript";
          case "4":
            return "dart";
          case "5":
            return "go";
          default:
            return "";
        }
      }
    },
    {
      title: "状态",
      dataIndex: "status",
      align: "center",
      render: item => {
        if (item === "0") {
          return <Tag color="orange">维护</Tag>;
        } else if (item === "1") {
          return <Tag color="green">进行中</Tag>;
        } else if (item === "2") {
          return <Tag color="cyan">完结</Tag>;
        } else if (item === "3") {
          return <Tag color="red">暂停</Tag>;
        }
      }
    },
    {
      title: "操作",
      key: "operation",
      align: "center",
      width: 180,
      fixed: "right",
      render: item => {
        return (
          <div>
            <Button type="primary" onClick={() => tableRow(item, 0)}>
              编辑
            </Button>
            <Button
              type="danger"
              style={{ marginLeft: "10px" }}
              onClick={() => tableRow(item, 1)}
            >
              删除
            </Button>
          </div>
        );
      }
    }
  ];
  const [tableData, setTableData] = useState();
  const [loading, setLoading] = useState(false);
  // 编辑删除点击
  const tableRow = (item, action) => {
    console.log(item, action);
    if (action === 0) {
      props.history.push("/index/addGithub/" + item.ID);
    } else {
      confirm({
        title: "提示",
        content: "确认是否删除此项目?",
        onOk() {
          Others.delete({ id: item.ID }).then(res => {
            res.code === 200
              ? message.success("删除成功!")
              : message.error(res.data);
            if (res.code === 200) {
              getList();
            }
          });
        },
        onCancel() {}
      });
    }
  };
  useEffect(() => {
    getList();
  }, []);
  // 获取列表
  const getList = () => {
    setLoading(true);
    Others.list().then(res => {
      if (res.code === 200) {
        setLoading(false);
        setTableData(res.data);
      }
    });
  };
  return (
    <div className="github white-bg">
      <Table
        rowKey={record => record.ID}
        columns={tableLabel}
        dataSource={tableData}
        scroll={{ x: 1500 }}
        bordered
        loading={loading}
      />
    </div>
  );
};
export default Github;
